<template>
  <div class="user">
    <div class="search">
      <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick" @queryBtnClick="handleQueryClick"></page-search>
      <page-content ref="pageContentRef" :contentConfig="contentConfig" :pageName="'user'" vuexModuleName="system"></page-content>
      <div class="page-modal">
        <!-- <el-dialog title="编辑用户" v-model="centerDialogVisible" width="30%" center>
          <cc-form v-bind="modalConfig" v-model="formData"></cc-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
            </span>
          </template>
        </el-dialog> -->

        <page-modal v-bind="modalConfig"></page-modal>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { searchFormConfig, contentConfig, modalConfig } from './config'
import { PageSearch } from '@/components/page-search'
import { PageContent } from '@/components/page-content'
import { usePageSearch } from '@/hooks/use-page-search'
import { ElDialog, ElButton } from 'element-plus'
import { CcForm } from '@/base-ui/form'
import { PageModal } from '@/components/page-modal'

export default defineComponent({
  name: 'user',
  components: { PageSearch, PageContent, ElDialog, ElButton, CcForm, PageModal },
  setup() {
    const formData = ref({})

    // 不推荐直接在 return 中通过展开运算符使用usePageSearch：...usePageSearch()
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    // const pageContentRef = ref<InstanceType<typeof PageContent>>()
    // const handleResetClick = () => {
    //   pageContentRef.value?.getPageData()
    // }

    // const handleQueryClick = (queryInfo: any) => {
    //   pageContentRef.value?.getPageData(queryInfo)
    // }

    const centerDialogVisible = ref(true)

    return { searchFormConfig, contentConfig, handleResetClick, handleQueryClick, pageContentRef, centerDialogVisible, modalConfig, formData }
  }
})
</script>
<style scoped lang="less"></style>
